<template>
  <div style="padding: 20px">
    <OpDetail :data="detailData" detail-key="id" :api="boInfo"> </OpDetail>
    <div class="records">
      <div class="count">
        <span
          >已有<span class="num">{{ followData?.length }}</span
          >个跟进记录</span
        >
        <Button type="primary" @click="handleAdd('add')">添加记录</Button>
      </div>
      <div v-if="followData?.length" class="line-box">
        <Timeline>
          <TimelineItem v-for="(v, i) in followData" :key="i">
            <div>
              <div class="time-box">
                <span class="time">{{ dayjs(v.followTime).format('YYYY-DD-MM') }}</span>
                <span>{{ v.followMethod }}</span>
                <span v-if="v.userName">（{{ v.userName }}）</span>
                <Button
                  v-if="v.opAuth"
                  style="margin-left: 16px"
                  type="primary"
                  ghost
                  @click="handleAdd('edit', v)"
                >
                  <template #icon>
                    <EditOutlined style="font-size: 14px; color: #165dff; line-height: 14px" />
                  </template>
                  修改
                </Button>
              </div>
              <div class="content">
                <div>
                  <p>跟进内容摘要：</p>
                  <span class="des">{{ v.followSummary }}</span>
                </div>

                <div v-if="v.attachmentPathsList?.length">
                  <p>跟进文件附件：</p>
                  <div
                    v-for="(urlItem, i) in v.attachmentPathsList"
                    :key="i"
                    style="
                      border-radius: 8px;
                      background: #fff4e7;
                      padding: 8px;
                      display: flex;
                      align-items: center;
                      gap: 8px;
                      margin-bottom: 12px;
                    "
                  >
                    <Image
                      src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/file-icon-1.png"
                      width="40px"
                      height="40px"
                    />
                    <div style="font-size: 14px; font-weight: bold; flex: 1">
                      {{ strToDocFileResult(urlItem).name }}
                    </div>
                    <a :href="strToDocFileResult(urlItem).url" target="_blank">
                      <Button type="primary" ghost style="border-radius: 12px">查看文件</Button>
                    </a>
                  </div>
                </div>

                <div v-if="v.screenshotPathsList?.length">
                  <p>沟通记录截图：</p>
                  <div style="display: flex; flex-wrap: wrap; gap: 8px">
                    <ImagePreviewGroup>
                      <div v-for="(url, i) in v.screenshotPathsList" :key="i">
                        <Image
                          :src="url"
                          border-radius="8px"
                          width="110px"
                          height="110px"
                          style="object-fit: contain"
                        ></Image>
                      </div>
                    </ImagePreviewGroup>
                  </div>
                </div>

                <div>
                  <p>记录来源：</p>
                  <span class="des">{{ v.sourceName }}</span>
                </div>
              </div>
            </div>
          </TimelineItem>
          <TimelineItem></TimelineItem>
        </Timeline>
      </div>
    </div>
    <!-- 添加跟进记录 -->
    <AddedModal @register="register" @reload="queryFollowList()" />
  </div>
</template>
<script setup lang="ts">
  import {
    DocFileResult,
    IBusinessOpportunityReviewList,
    IFollowRecord,
  } from '@/api/institution/model/businessOpportunitiesManageModel';
  import OpDetail from '../components/OpDetail.vue';
  import { onMounted, ref } from 'vue';
  import { boDetail, boInfo, followList } from '@/api/institution/businessOpportunitiesManage';
  import { useRoute } from 'vue-router';
  import { Image, Button, Timeline, TimelineItem, ImagePreviewGroup } from 'ant-design-vue';
  import AddedModal from './added.vue';
  import { useModal } from '@/components/Modal/src/hooks/useModal';
  import { EditOutlined } from '@ant-design/icons-vue';
  import dayjs from 'dayjs';

  const route = useRoute();
  const id = ref();
  const detailData = ref<IBusinessOpportunityReviewList>();
  onMounted(() => {
    id.value = route.query.id;
    queryDetail();
    queryFollowList();
  });
  const queryDetail = async () => {
    detailData.value = await boDetail(id.value);
  };

  const strToDocFileResult = (str: string) => {
    return JSON.parse(str) as DocFileResult;
  };

  const followData = ref<IFollowRecord[]>([]);
  const queryFollowList = async () => {
    const { records } = await followList(id.value);
    followData.value = records;
  };

  const [register, { openModal }] = useModal();

  function handleAdd(type: string, row?: IFollowRecord) {
    openModal(true, {
      type,
      row: { ...row, boInfoId: id.value },
    });
  }
</script>
<style lang="less" scoped>
  .records {
    margin-top: 20px;
    .count {
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      .num {
        color: #2878ff;
      }
    }
    .line-box {
      ::v-deep .ant-timeline-item-tail {
        border-left: 2px solid #2878ff !important;
      }
      .time-box {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
        span {
          font-size: 20px;
          line-height: 28px;
          color: #1d2129;
          font-weight: 700;
        }
        .time {
          font-size: 16px;
          line-height: 24px;
          margin-right: 16px;
        }
      }
      .content {
        background-color: #fff;
        padding: 20px;
        padding-top: 12px;
      }
      p {
        font-size: 16px;
        line-height: 24px;
        color: #1d2129;
        margin-bottom: 8px;
        padding-top: 8px;
      }
      .des {
        color: #86909c;
      }
    }
  }
</style>
